import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// 1.0 跟组件
class App1 extends Component {
  state = {};
  render() {
    return (
      <div>
        <Router>
          <Link to="/home">Home2</Link>
          <Link to="/login">Login2</Link>

          <Route path="/home" component={Home2}></Route>
          <Route path="/login" component={Login2}></Route>
        </Router>
      </div>
    );
  }
}

export default App1;

class Home2 extends Component {
  state = {};
  render() {
    return (
      <div style={{ width: "600px", height: "400px", backgroundColor: "pink" }}>
        <Link to="/home/user">跳转到User组件</Link> |
        <Link to="/home/role">跳转到Role组件</Link>
        <Route path="/home/user" component={User1}></Route>
        <Route path="/home/role" component={Role1}></Route>
      </div>
    );
  }
}

class Login2 extends Component {
  state = {};
  render() {
    return <div>Login2</div>;
  }
}

class User1 extends Component {
  state = {};
  render() {
    return <div>User1</div>;
  }
}

class Role1 extends Component {
  state = {};
  render() {
    return <div>Role1</div>;
  }
}
